<template>
  <div class="body_bgi full p_10 relative">
    <bigscreen-header :headerName="contestName + judgeName + '获得羊'" />

    <div class="w_80_p m_0_auto h_full-200 flex_row_center">
      <div 
        class="flex_1 h_50_p text_center flex_column_between flex_center p_10 animate__animated animate__slideInUp"
        v-for="(item, index) in sheepList" :key="index"
        @click="goToPage(`/sheepDetail/${contestId}/${item.rfid}`)"
      >
        <div class="h_70_p cursor">
          <div class="h_full border_1_s_B2B1B0 border_t_radius_10 border_b_none">
            <img class="h_full" v-if="item.images" :src="formatAnimalImg(item.images)" alt="">
            <img class="h_full" v-else src="../assets//image/sheep.png" alt="">
          </div>
      
          <div class="border_1_s_B2B1B0 border_b_radius_10 border_t_none">
            <div class="h_40 lh_40 color_fff fs_1_5vw ls_2"> {{ item.sheepNumber }} </div>
            <div class="h_40 lh_40 fs_1_5vw border_t_1_s_B2B1B0 main_text fw_bold"> {{ item.yzhName }} </div>
          </div>
        </div>
      </div>
    </div>

    <bigscreen-footer />
  </div>
</template>

<script>
  import { getSheepSortList } from '@/api/index.js'
  import BigscreenHeader from '@/components/Header.vue'
  import BigscreenFooter from '@/components/Footer.vue'

  export default {
    name: 'GradeDetail',
    components: { BigscreenHeader, BigscreenFooter },
    data() {
      return {
        contestId: null,
        contestName: null,
        judgeName: null,
        money: null,

        sheepList: [],
      }
    },
    async mounted() {
      let contestId = this.$route.params.contestId
      let contestName = this.$route.params.contestName
      let judgeName = this.$route.params.judgeName
      let money = this.$route.params.money

      this.contestId = contestId
      this.contestName = contestName
      this.judgeName = judgeName
      this.money = money

      // 获取 xxx 比赛 名次 羊 
      this.getSheepSortList(contestId, judgeName)  
    },
    methods: {
      // 获取 赛羊 排行
      async getSheepSortList(contestId, judgeName) {
        let res = await getSheepSortList(contestId)
        try {
          if (res.code == 1000 && res.data) {

            for (let i in res.data) {
              if (res.data[i].name == judgeName) {
                this.sheepList = res.data[i].children
              }
            }
          }
        } catch(err) {
          console.log('获取赛羊名次信息失败 : ', err);
        }
      },

      // 格式化 羊 图片, 获取 第一张 图片
      formatAnimalImg(str) {
        if (str) {
          let list = str.split(',')

          if (list.length) {
            return list[0]
          } 

          return ''
        }
      },

      // 10000.00
      formatMoney(val) {
        return val + '.00'
      },

      goToPage(path) {
        this.$router.push(path)
      }
    }
  }
</script>

<style>

</style>